<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="父工单详情" data-page-identification="s_dtzosavlog">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_4wk3vtmqnu 面包屑_dpp8vl4jq5 -->

<!--            <a-breadcrumb class="vid_4wk3vtmqnu">-->
<!--                <a-breadcrumb-item v-for="(item, index) in state.breadCrumbList"-->
<!--                    ><a href="#" @click.stop="handleReturn(item)">{{ item.title }}</a></a-breadcrumb-item-->
<!--                >-->
<!--            </a-breadcrumb>-->
            <!-- end vid_4wk3vtmqnu 面包屑_dpp8vl4jq5 -->

          <!--                  预览-->
          <a-modal
            v-model:visible="state.previewVisible"
            @cancel="handlepreviewCancel"
            width="1000px"
            title="图片预览"
            :footer="null"
          >
            <div>
              <img :src="state.previewImage" alt="附件" style="width: 100%" />
            </div>
          </a-modal>
          <!--                  预览-->
          <!--          删除-->
          <a-modal centered v-model:visible="state.deleteVisible" title="删除" @ok="handleDelete">
            请确认是否删除该工单任务，如该工单建立了子工单请先对子工单进行解决后在进行删除操作。
          </a-modal>
          <!--          删除-->
          <!--          新建/编辑备注-->
          <a-modal
            v-model:visible="state.addRemarkVisible"
            :title="state.remarkTitle"
            @ok="confirmRemark"
            width="880px"
            centered
            :ok-button-props="{ loading: state.remarkLoading }"
          >
            <div class="remark-modal">
              <QuillEditor ref="remarkQuillRef" :options="editorOption" class="quill-editor"
              /></div>
          </a-modal>
          <!--          新建/编辑备注-->
          <!--          回复备注-->
          <a-modal
            v-model:visible="state.backRemarkVisible"
            centered
            title="回复备注"
            @ok="confirmBackRemark"
            width="880px"
            :ok-button-props="{ loading: state.remarkLoading }"
          >
            <div class="remark-modal">
              <QuillEditor ref="backRemarkQuillRef" :options="editorOption" class="quill-editor"
              /></div>
          </a-modal>
          <!--          恢复备注-->
          <!--          查看附件-->
          <a-modal centered v-model:visible="state.fileVisible" title="附件" :footer="null">
            <div
              class="top-title"
              v-if="currentData.descriptionAttachmentList && currentData.descriptionAttachmentList.length"
            >工单描述附件</div
            >
            <div class="file-content">
              <div
                v-for="(item, index) in currentData.descriptionAttachmentList"
                :key="index"
                style="margin-bottom: 10px"
              >
                <a-dropdown>
                            <span
                              style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block"
                              :title="item.name"
                            >
                                {{ item.name }}
                            </span>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a-button
                          style="width: 100%"
                          type="link"
                          size="small"
                          @click="previewAttachment(item)"
                        >预览</a-button
                        >
                      </a-menu-item>
                      <a-menu-item>
                        <a-button
                          style="width: 100%"
                          type="link"
                          size="small"
                          @click="handlerDownload(item)"
                        >下载</a-button
                        >
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown></div
              >
            </div>
            <div class="top-title" v-if="currentData.attachmentList && currentData.attachmentList.length"
            >完成证明附件</div
            >
            <div class="file-content">
              <div v-for="(item, index) in currentData.attachmentList" :key="index" style="margin-bottom: 10px">
                <a-dropdown>
                            <span
                              style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block"
                              :title="item.name"
                            >
                                {{ item.name }}
                            </span>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a-button
                          style="width: 100%"
                          type="link"
                          size="small"
                          @click="previewAttachment(item)"
                        >预览</a-button
                        >
                      </a-menu-item>
                      <a-menu-item>
                        <a-button
                          style="width: 100%"
                          type="link"
                          size="small"
                          @click="handlerDownload(item)"
                        >下载</a-button
                        >
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown></div
              >
            </div>
          </a-modal>
          <!--          查看附件-->
          <!--          查看详情附件-->
          <a-modal centered v-model:visible="state.fileDetailVisible" title="工单解决证明附件" :footer="null">
            <div
              class="top-title"
              v-if="currentData.descriptionAttachmentList && currentData.descriptionAttachmentList.length"
            >工单描述附件</div
            >
            <div class="file-content">
              <div
                v-for="(item, index) in currentData.descriptionAttachmentList"
                :key="index"
                style="margin-bottom: 10px"
              >
                <a-dropdown>
                            <span
                              style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block"
                              :title="item.name"
                            >
                                {{ item.name }}
                            </span>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a-button
                          style="width: 100%"
                          type="link"
                          size="small"
                          @click="previewAttachment(item)"
                        >预览</a-button
                        >
                      </a-menu-item>
                      <a-menu-item>
                        <a-button
                          style="width: 100%"
                          type="link"
                          size="small"
                          @click="handlerDownload(item)"
                        >下载</a-button
                        >
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown></div
              >
            </div>
            <div class="top-title" v-if="currentData.attachmentList && currentData.attachmentList.length"
            >完成证明附件</div
            >
            <div class="file-content">
              <div v-for="(item, index) in currentData.attachmentList" :key="index">
                <a-dropdown>
                            <span
                              style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block"
                              :title="item.name"
                            >
                                {{ item.name }}
                            </span>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item>
                        <a-button
                          style="width: 100%"
                          type="link"
                          size="small"
                          @click="previewAttachment(item)"
                        >预览</a-button
                        >
                      </a-menu-item>
                      <a-menu-item>
                        <a-button
                          style="width: 100%"
                          type="link"
                          size="small"
                          @click="handlerDownload(item)"
                        >下载</a-button
                        >
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown></div
              >
            </div>
          </a-modal>
          <!--          查看附件-->

          <!--          大屏查看-->
          <a-modal
            :visible="state.detailVisible"
            :title="state.detailTitle"
            width="1200px"
            :footer="null"
            centered
            @cancel="state.detailVisible = false"
          >
            <div
              style="max-height: 800px; overflow-y: auto"
              v-html="getHtmlContent(JSON.stringify(state.detailDescription))"
            ></div>
          </a-modal>
          <!--          大屏查看-->
          <!--          删除-->

          <!--          删除-->
          <!--          新建/编辑工单-->
          <a-modal
            centered
            v-model:visible="state.editSonVisible"
            :title="state.modalTitle"
            @ok="submit"
            width="1000px"
            :ok-button-props="{ loading: state.sonLoading }"
            @cancel="resetSonForm"
          >
            <div class="form-content">
              <a-form :model="state.modalForm" ref="sonRef">
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="工单标题"
                      :rules="[{ required: true, message: '请输入工单标题', trigger: 'blur' }]"
                      name="content"
                    >
                      <a-input
                        maxlength="20"
                        show-count
                        placeholder="请输入"
                        v-model:value="state.modalForm.content"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :span="24" v-if="state.gdDetail">
                    <a-form-item label="父工单计划解决时间">
                                    <span
                                      style="
                                            border: 1px solid #d9d9d9;
                                            width: 100%;
                                            height: 32px;
                                            display: block;
                                            padding: 4px 11px;
                                        "
                                    >{{ state.gdDetail.workOrderDto.endTime }}</span
                                    >
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item
                      label="计划解决时间"
                      :rules="[{ required: true, message: '请选择计划解决时间', trigger: 'blur' }]"
                      name="endTime"
                    >
                      <a-date-picker
                        show-time
                        placeholder="请选择"
                        v-model:value="state.modalForm.endTime"
                        value-format="YYYY-MM-DD HH:mm:ss"
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-item
                      label="解决人"
                      :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"
                      name="solverList"
                    >
                      <a-select
                        show-search
                        allow-clear
                        mode="multiple"
                        :options="state.allUser"
                        v-model:value="state.modalForm.solverList"
                        placeholder="请选择"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-col>
                  <div style="width: 700px; margin-left: 115px; margin-bottom: 28px">
                    <a
                      href="javascript:;"
                      v-for="(item, num) in taskPeopleList"
                      @click="handlerAddPeople(item.value, index)"
                    ><span style="margin: 0 5px">{{ item.value }}</span></a
                    >
                  </div>
                </a-col>
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="问题描述"
                      :rules="[{ required: true, message: '请输入问题描述', trigger: 'blur' }]"
                      name="quillData"
                    >
                      <QuillEditor
                        v-model:content="state.modalForm.quillData"
                        ref="quillEditor"
                        :options="editorOption"
                        class="quill-editor"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-col :span="24">
                  <a-form-item label="上传附件">
                    <a-upload
                      v-model:file-list="state.modalForm.descriptionAttachmentList"
                      :multiple="true"
                      :before-upload="handlerFatherUpload"
                      @remove="handlerFatherRemove"
                      accept=".xlsx, image/*,.docx,, .xls,.mp4"
                    >
                      <a-button type="primary">
                        <upload-outlined />
                        上传
                      </a-button>
                    </a-upload>
                    <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span>
                  </a-form-item>
                </a-col>
              </a-form>
            </div>
          </a-modal>
          <!--          编辑子工单-->
          <!--          流转变更-->
          <a-modal
            centered
            v-model:visible="newState.circulationVisible"
            title="流转"
            width="800px"
            @ok="confirmCirculation"
            destroy-on-close
            :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
            @cancel="cancelCirculation"
          >
            <div class="change-status">
              <a-form :model="newState.circulationForm" ref="circulationFormRef">
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="解决人"
                      :rules="[{ required: true, message: '请选择解决人', trigger: 'blur' }]"
                      name="solverList"
                    >
                      <a-select
                        show-search
                        allow-clear
                        mode="multiple"
                        :options="state.allUser"
                        v-model:value="newState.circulationForm.solverList"
                        placeholder="请选择"
                        :field-names="{ label: 'name', value: 'name' }"
                        :filter-option="
                                            (input, option) => {
                                                return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </a-modal>
          <!--          流转变更-->
          <!--          解决中变更-->
          <a-modal
            centered
            v-model:visible="newState.resolvingVisible"
            title="解决中"
            width="1000px"
            @ok="confirmResolving"
            destroy-on-close
            :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
            @cancel="cancelResolving"
          >
            <div class="change-status">
              <a-form :model="newState.resolvingForm" ref="resolvingFormRef">
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="解决方案概述"
                      :rules="[{ required: true, message: '请输入解决方案概述', trigger: 'blur' }]"
                      name="solution"
                    >
                      <a-textarea v-model:value="newState.resolvingForm.solution" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-item label="解决方案详述">
                      <QuillEditor ref="resolvingQuillRef" :options="editorOption" class="quill-editor" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </a-modal>
          <!--          解决中变更-->
          <!--          已解决变更-->
          <a-modal
            centered
            v-model:visible="newState.resolvedVisible"
            title="已解决"
            width="1000px"
            @ok="confirmResolved"
            destroy-on-close
            :ok-button-props="{
                    loading: newState.changeStatusLoading
                }"
            @cancel="cancelResolved"
          >
            <div class="change-status">
              <a-form :model="newState.resolvedForm" ref="resolvedFormRef">
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="解决方案概述"
                      :rules="[{ required: true, message: '请输入解决方案概述', trigger: 'blur' }]"
                      name="solution"
                    >
                      <a-textarea v-model:value="newState.resolvedForm.solution" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-item label="解决方案详述">
                      <QuillEditor ref="resolvedQuillRef" :options="editorOption" class="quill-editor"
                      /></a-form-item>
                  </a-col>
                </a-row>
                <a-col :span="24">
                  <a-form-item label="上传附件">
                    <a-upload
                      v-model:file-list="newState.resolvedForm.attachmentList"
                      :multiple="true"
                      :before-upload="handlerResolvedUpload"
                      @remove="handlerResolvedRemove"
                      accept=".xlsx, image/*,.docx,, .xls,.mp4"
                    >
                      <a-button type="primary">
                        <upload-outlined />
                        上传
                      </a-button>
                    </a-upload>
                    <span>支持格式：.xlsx, image/*,.docx,, .xls,.mp4</span></a-form-item
                  >
                </a-col>
              </a-form>
            </div>
          </a-modal>
          <!--          已解决变更-->
          <div class="body">
            <div class="top-information" v-if="state.gdDetail?.workOrderDto">
              <div class="information-top">
                <div class="title"> <div class="title-icon"></div> 基本信息</div>
                  <div class="gd-status" :style="getColorStyle(state.gdDetail.workOrderDto.status)">{{state.gdDetail.workOrderDto.status}}</div>
              </div>
              <div class="information-table">
                <div class="one-line">
                  <div class="table-title">工单标题</div>
                  <div class="table-content-one">{{ state.gdDetail.workOrderDto.content }}</div>
                </div>
                <div class="four-line middle-div">
                  <div class="table-title">工单编号</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.number }}</div>
                  <div class="table-title middle">工单类型</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.type }}</div>
                  <div class="table-title middle">优先级</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.priority }}</div>

                </div>
                <div class="four-line middle-div">
                  <div class="table-title ">问题来源</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.questionSource }}</div>
                  <div class="table-title middle">所属区域</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.areaName }}</div>
                  <div class="table-title middle">所属项目</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.projectName }}</div>

                </div>
                <div class="four-line middle-div">
                  <div class="table-title ">所属产品</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.production }}</div>
                  <div class="table-title middle">环境</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.environment }}</div>
                  <div class="table-title middle">项目经理</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.pmName }}</div>

                </div>
                <div class="four-line middle-div">
                  <div class="table-title ">PMO</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto?.pmo }}</div>
                  <div class="table-title middle">所属客户</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto?.customer }}</div>
                  <div class="table-title middle">创建人(owner)</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.createdBy }}</div>

                </div>
                <div class="four-line middle-div">
                  <div class="table-title"> 解决人</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto.solver }}</div>
                  <div class="table-title middle">创建时间</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto?.createdTime }}</div>
                  <div class="table-title middle">计划解决时间</div>
                  <div class="table-content-four">{{ state.gdDetail.workOrderDto?.endTime }} </div>
                </div>
              </div>
            </div>
              <div class="problem-description">
                  <div class="information-top">
                      <div class="title"> <div class="title-icon"></div> 操作</div>
                  </div>
                  <ButtonItem :id="state.detailId"/>
              </div>
            <div class="problem-description">
              <div class="information-top">
                <div class="title"> <div class="title-icon"></div> 问题描述</div>
              </div>
              <div class="description-content" v-html="getHtmlContent(state.detailDescription)">
              </div>
              <div class="description-fileList">
                <div class="title"> <div class="title-icon"></div> 问题描述附件附件</div>
                <div class="file-drag">
                  <a-upload-dragger
                    v-model:file-list="newState.descriptionFileList"
                    name="file"
                    :multiple="true"
                    :before-upload="handlerDescriptionUpload"
                    @remove="handlerDescriptionRemove"
                    accept=".pdf, image/*,.doc,docx,, .xls,.ppt,.pptx,.html"
                  >
                    <p class="file-top"> 将你的想上传的文件拖拽至此处 </p>
                    <p style="display: flex;align-items: center;flex-direction: column"><div class="ant-upload-drag-icon">上传附件</div> </p>
                    <p class="file-bottom">
                      支持格式：PDF、DOC、DOCX、PPT、PPTX、PNG、JPG、JPEG、HTML
                    </p>
                  </a-upload-dragger>
                </div>
              </div>
            </div>
            <div class="problem-description">
              <div class="information-top">
                <div class="title" style="margin-bottom: 16px"> <div class="title-icon"></div> 解决方案概述</div>
                <div> <a-button type="primary" @click="saveDetail" :loading="newState.saveLoading">保存</a-button></div>
              </div>
              <a-textarea v-model:value="newState.solution"/>
            </div>
            <div class="problem-description abbreviation">
              <div class="information-top">
                <div class="title" style="margin-bottom: 16px"> <div class="title-icon"></div> 解决方案详述</div>
                <div> <a-button type="primary" @click="saveDetail" :loading="newState.saveLoading">保存</a-button></div>
              </div>
              <QuillEditor
                ref="solutionQuillEditor"
                :options="editorOption"
                class="quill-editor"
              />
            </div>
            <div class="problem-description">
              <div class="information-top">
                <div class="title"> <div class="title-icon"></div> 解决证明附件</div>
              </div>
              <div class="description-fileList">
                <div class="file-drag">
                  <a-upload-dragger
                    v-model:file-list="newState.solveFileList"
                    name="file"
                    :multiple="true"
                    :before-upload="handlerSolveUpload"
                    @remove="handlerSolveRemove"
                    accept=".pdf, image/*,.doc,docx,, .xls,.ppt,.pptx,.html"
                  >
                    <p class="file-top"> 将你的想上传的文件拖拽至此处 </p>
                    <p style="display: flex;align-items: center;flex-direction: column"><div class="ant-upload-drag-icon">上传附件</div> </p>
                    <p class="file-bottom">
                      支持格式：PDF、DOC、DOCX、PPT、PPTX、PNG、JPG、JPEG、HTML
                    </p>
                  </a-upload-dragger>
                </div>
              </div>
            </div>
            <!--              备注-->
            <div class="body-bottom">
              <div class="remark-div">
                <div class="information-top">
                  <div class="title"> <div class="title-icon"></div> 历史备注</div>
                  <div class="title-right">
                    <a-button type="primary" @click="handleAddRemark">新建</a-button>
                  </div>
                </div>
                <div
                  v-for="(item, index) in state.gdDetail.workOrderRemarkDtoList"
                  :key="index"
                  class="remark-main"
                >
                  <div class="collapse-title">
                    <div class="collapse-title-left">
                      <div class="remark-title"
                      >创建人(owner)：<span class="remark-weight">{{ item.createdBy }}</span></div
                      >
                      <div class="remark-title"
                      >创建时间：<span class="remark-weight">{{ item.createdTime }}</span></div
                      >
                    </div>
                    <div class="collapse-title-right">
                      <div class="collapse-title-right-btn">
                        <div class="btn-item" @click="feedBackRemark(item)"
                        >回复 <div class="border-btn"></div
                        ></div>
                        <div class="btn-item" @click="editRemark(item)"
                        >编辑 <div class="border-btn"></div
                        ></div>
                        <a-popconfirm
                          title="确定要删除这条备注吗？"
                          @confirm="handlerDeleteRemark(item)"
                        >
                          <div class="btn-item">删除 </div>
                        </a-popconfirm>
                      </div>
                    </div>
                  </div>
                  <div class="remark-content">
                    <div style="font-size: 14px; color: #262626; letter-spacing: 0; font-weight: 500"
                    >备注:</div
                    >
                    <div class="remark-text" v-html="getHtmlContent(item.content)"> </div>
                    <div v-for="(child, index) in item.feedbackWorkOrderRemarkDtoList" class="remark-child">
                      <div class="collapse-title">
                        <div class="collapse-title-left">
                          <div class="remark-title"
                          >回复人：<span class="remark-weight">{{ child.createdBy }}</span></div
                          >
                          <div class="remark-title"
                          >回复时间：<span class="remark-weight">{{
                              child.createdTime
                            }}</span></div
                          >
                        </div>

                        <div class="collapse-title-right">
                          <div class="collapse-title-right-btn">
                            <div class="btn-item" @click="editRemark(child)"
                            >编辑 <div class="border-btn"></div
                            ></div>
                            <a-popconfirm
                              title="确定要删除这条回复吗？"
                              @confirm="handlerDeleteFeedBack(child)"
                            >
                              <div class="btn-item">删除 </div>
                            </a-popconfirm>
                          </div>
                        </div>
                      </div>
                      <div class="remark-inner" v-html="getHtmlContent(child.content)"> </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div class="change-record">
              <div class="information-top">
                <div class="title"> <div class="title-icon"></div> 操作日志</div>
              </div>
              <div class="operation-log" v-for="(item,index) in state.tableData" :key="index">
                <div class="opration-title">
                  <div class="circle">
                    <div class="circle-line" v-if="index!==0"></div>
                    <div class="inner-circle"></div>
                  </div>
                  <div class="title-content">{{item.month}}</div>
                </div>
                <div class="opration-content" v-for="(son,index) in item.workOrderChangeRecordList" :key="index">
                  <div class="item-content item-content1">
                    <div class="content-line"></div>
                    <div class="opration-title">触发时间：</div>
                    <div class="opration-msg" :title="son.submissionTime">{{ son.submissionTime }}</div>
                  </div>
                  <div class="item-content item-content2">
                    <div class="content-line"></div>
                    <div class="opration-title">操作人：</div>
                    <div class="opration-msg" :title="son.submitter">{{ son.submitter }}</div>
                  </div>
                  <div class="item-content item-content3">
                    <div class="content-line"></div>
                    <div class="opration-title">操作内容：</div>
                    <div class="inner-msg" :title="son.classify">{{
                        son.classify
                      }}</div>
                  </div>
                    <div class="item-content item-content3">
                        <div class="content-line"></div>
                        <div class="opration-title">备注：</div>
                        <div class="inner-msg" :title="son.classify">{{
                                son.remark
                            }}</div>
                    </div>
                  <div class="item-content item-content5">
                    <div class="content-line"></div>
                    <div class="opration-title">工单编号：</div>
                    <div class="inner-msg" :title="son.workOrderNumber">{{
                        son.workOrderNumber
                      }}</div>
                  </div>
                  <div class="item-content item-content4">
                    <div class="opration-title">工单标题：</div>
                    <div class="opration-msg" :title="son.content">{{ son.content }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!--              备注-->
          </div>
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated,
        nextTick
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'

    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'

    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    const vid_4wk3vtmqnu_props = reactive({
        rt_showIcon: false
    })

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */
    const vid_4wk3vtmqnu_props_tabConfig = computed(() => {
        const initValue = [
            {
                'key': 'tab1',
                'title': '工单详情',
                'targetPage': {
                    'settingType': 'PAGE_LIST',
                    'url': '/app_50000005/page/undefined',
                    'customUrl': '',
                    'parameter': []
                },
                'icon': '',
                'parameter': [],
                'applicationId': 50000005,
                'query': {}
            },
            {
                'key': 'tab2',
                'title': '子工单详情',
                'icon': '',
                'targetPage': { 'settingType': '', 'url': '', 'customUrl': '' },
                'parameter': [],
                'applicationId': 50000005,
                'query': {}
            }
        ]
        return initValue
    })
    /*** PUBLISH_EXEGESIS ***
 systemStore.addBreadcrumbInfo(vid_4wk3vtmqnu_props_tabConfig.value);
 *** PUBLISH_EXEGESIS ***/
    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    //     富文本设置
    onMounted(() => {
        const urlParams = new URLSearchParams(window.location.search)
        // 获取单个参数
        state.detailId = Number(urlParams.get('id'))
        state.pageUrl = Number(urlParams.get('url'))
        let lastId = Number(urlParams.get('lastId'))
        if (state.pageUrl == '3000000784') {
            state.breadCrumbList[0].title = `工单管理`
        } else {
            state.breadCrumbList[0].title = `工单详情`
        }
        state.breadCrumbList[0].url = `/app_50000005/page/${state.pageUrl}?id=${lastId}`

        // initTitle()
        getData()
    })
    function showBig(title, flag) {
        state.detailVisible = true
        state.detailTitle = title
    }
    const quillMsgRef = ref(null)
    import { QuillEditor, Quill } from '@vueup/vue-quill'
    import ImageUploader from 'quill-image-uploader'
    import '@vueup/vue-quill/dist/vue-quill.snow.css'
    const titleConfig = [
        { Choice: ' .ql-bold', title: '加粗' },
        { Choice: ' .ql-italic', title: '斜体' },
        { Choice: ' .ql-underline', title: '下划线' },
        { Choice: ' .ql-strike', title: '删除线' },
        { Choice: ' .ql-blockquote', title: '块引用' },
        { Choice: ' .ql-code-block', title: '插入代码' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-size', title: '字体大小' },
        { Choice: ' .ql-color', title: '字体颜色' },
        { Choice: ' .ql-background', title: '字体背景颜色' },
        { Choice: ' .ql-list[value="ordered"]', title: '有序列表' },
        { Choice: ' .ql-list[value="bullet"]', title: '无序列表' },
        { Choice: ' .ql-header[value="1"]', title: '1级标题' },
        { Choice: ' .ql-header[value="2"]', title: '2级标题' },
        { Choice: ' .ql-align', title: '对齐方式' },
        { Choice: ' .ql-clean', title: '清除字体格式' },
        { Choice: ' .ql-image', title: '图像' },
        { Choice: ' .ql-size .ql-picker-item[data-value="small"]', title: '小号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="large"]', title: '大号' },
        { Choice: ' .ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
        { Choice: ' .ql-size .ql-picker-item:nth-child(2)', title: '标准' },
        { Choice: ' .ql-align .ql-picker-item:first-child', title: '居左对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
        { Choice: ' .ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
    ]
    // 注册图片上传模块
    Quill.register('modules/imageUploader', ImageUploader)

    // 上传API
    const uploadFileAPI = async file => {
        const data = new FormData()
        data.append('file', file)

        return post('/file-storage/api/v1/file/upload', data)
            .then(({ data: { fullUrl } }) => {
                return { data: { fullUrl } }
            })
            .catch(error => {
                console.error('上传图片出错:', error)
                throw error // 抛出错误以供外部处理
            })
    }

    // 将本地文件转换为URL
    const getLocalImageURL = file => {
        return new Promise(resolve => {
            const reader = new FileReader()
            reader.onload = e => {
                resolve(e.target.result)
            }
            reader.readAsDataURL(file)
        })
    }

    // Quill 编辑器选项
    const editorOption = ref({
        modules: {
            // imageUploader: {
            //     upload: async file => {
            //         const localUrl = await getLocalImageURL(file)
            //         return localUrl // 返回本地图片的 URL 进行预览
            //     }
            // },
            toolbar: [
                // [{ font: Font.whitelist }], // 字体
                ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], // 引用，代码块
                [{ header: 1 }, { header: 2 }], // 标题1，标题2
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
                // [{ script: 'sub' }, { script: 'super' }], // 上标，下标
                // [{ indent: '-1' }, { indent: '+1' }], // 缩进
                // [{ direction: 'rtl' }], // 文字方向
                [{ size: ['small', false, 'large', 'huge'] }], // 文字大小
                // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题大小
                [{ color: [] }, { background: [] }], // 字体颜色，背景颜色
                [{ align: [] }], // 对齐
                ['clean'], // 清除格式
                ['image'] // 链接，图片，视频
            ]
        }
    })
    const quillEditor = ref(null) // 引用QuillEditor组件
    const sonRef = ref(null)
    // 提交表单的方法
    async function submit() {
        sonRef.value.validate().then(async () => {
            const deltaContent = quillEditor.value.getContents()
            const htmlContent = quillEditor.value.getHTML() // 获取 HTML 内容
            const parser = new DOMParser()
            const doc = parser.parseFromString(htmlContent, 'text/html')

            // 查找所有的本地图片
            const images = doc.querySelectorAll('img')
            const imageUploadPromises = []

            images.forEach(img => {
                const localSrc = img.getAttribute('src')

                // 如果是本地图片，上传图片并替换URL
                if (localSrc.startsWith('data:')) {
                    const file = dataURLtoFile(localSrc, 'image.png') // 转换为 File 对象

                    const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
                        // 新文件对象
                        const newFile = {
                            uid: file.uid || Date.now(), // 生成唯一 uid
                            lastModified: file.lastModified || Date.now(),
                            name: file.name || 'image.png', // 可以自定义文件名
                            size: file.size || 0,
                            type: file.type || 'image/png',
                            status: 'done',
                            url: fullUrl
                        }

                        // 更新文件列表
                        state.modalForm.fileList = [
                            // 保留已存在文件（去除重复）
                            ...state.modalForm.fileList.filter(
                                item => item.uid !== file.uid && item.name !== file.name
                            ),
                            // 添加新的文件
                            newFile
                        ]
                        // state.modalForm.fileList.push(newFile)
                        // 替换图片 URL
                        // img.setAttribute('src', fullUrl) // 替换为服务器上的图片URL
                    })

                    imageUploadPromises.push(uploadPromise)
                }
            })

            try {
                await Promise.all(imageUploadPromises)
            } catch (error) {
                console.error('图片上传失败', error)
                return // 终止提交
            }

            // 在这里可以准备最终的数据并提交
            const finalContent = doc.body.innerHTML // 获取更新后的 HTML 内容

            if (currentData.value.id) {
                // 编辑保存逻辑
                const params = { ...state.modalForm }
                params.description = JSON.stringify(deltaContent)
                put('/solution-ppm/api/v2/built-in-system-ppm/work_order', params).then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    resetFather()
                    state.editSonVisible = false
                    getData()
                })
            } else {
                // 新建保存逻辑
                const params = { ...state.modalForm }
                params.description = JSON.stringify(deltaContent)
                post('/solution-ppm/api/v2/built-in-system-ppm/work_order', params).then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    resetFather()
                    state.editSonVisible = false
                    getData()
                })
            }
        })
    }

    // 将 dataURL 转换为 File 对象的辅助函数
    const dataURLtoFile = (dataurl, filename) => {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], filename, { type: mime })
    }
    const currentData = ref({})
    function initTitle() {
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''
        for (let item of titleConfig) {
            let tip = document.querySelector('.ql-toolbar' + item.Choice)
            if (!tip) continue
            tip.setAttribute('title', item.title)
        }
    }
    //     富文本设置
    const state = reactive({
        breadCrumbList: [
            {
                'title': '',
                'url': '/app_50000005/page/undefined'
            },
            {
                'title': '子工单详情',
                'url': ''
            }
        ],
        pageUrl: '',
        detailVisible: false,
        detailTitle: '',
        detailId: undefined,
        dataList: [],
        fileVisible: false,
        fileDetailVisible: false,
        addRemarkVisible: false,
        backRemarkVisible: false,
        remarkTitle: '',
        remarkMsg: '',
        remarkVisible: false,
        remarkList: [],
        changeStatusVisible: false,
        modalForm: {
            parentId: undefined,
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            milepostId: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            fileList: [],
            quillData: ''
        },
        editSonVisible: false,
        modalTitle: '',
        gdDetail: {},
        changeStatusForm: {
            status: undefined,
            reason: '',
            attachmentList: [],
            workOrderId: undefined,
            solution: undefined
        },
        remarkLoading: false,
        detailDescription: {},
        changeStausList: [
            {
                label: '正在处理',
                value: '正在处理'
            },
            {
                label: '已解决',
                value: '已解决'
            },
            {
                label: '无需解决',
                value: '无需解决'
            },
            {
                label: '申请流转',
                value: '申请流转'
            }
        ],
        deleteVisible: false,
        previewImage: '',
        previewVisible: false
        //   是否是回复父亲备注
    })
    const columns = [
        {
            title: '变更模块',
            dataIndex: 'changeFieldName',
            align: 'center',
            width: 100,
            ellipsis: true
        },
        {
            title: '工单标题',
            dataIndex: 'count',
            align: 'center',
            width: 100,
            ellipsis: true
        },
        {
            title: '变更前',
            dataIndex: 'beforeChange',
            align: 'center',
            width: 80,
            ellipsis: true
        },
        {
            title: '变更后',
            dataIndex: 'afterChange',
            align: 'center',
            width: 80,
            ellipsis: true
        },
        {
            title: '验证状态',
            dataIndex: 'approveStatus',
            align: 'center',
            width: 100,
            ellipsis: true
        },
        {
            title: '审批人',
            dataIndex: 'approveUser',
            align: 'center',
            width: 80,
            ellipsis: true
        },
        {
            title: '提交人',
            dataIndex: 'submitter',
            align: 'center',
            width: 120,
            ellipsis: true
        },
        {
            title: '提交时间',
            dataIndex: 'submissionTime',
            align: 'center',
            width: 120,
            ellipsis: true
        }
    ]
    // 跳子详情
    function handleSonDetail(id) {
        router.push(
            `${import.meta.env.VITE_PUBLIC_PATH}/page/3000000787?id=${id}&url=3000000785&lastId=${state.detailId}`
        )
    }
    function getData() {
      pageLoading.loading = true
      get(`/solution-ppm/api/v2/built-in-system-ppm/work_order/details/${state.detailId}`)
        .then(data => {
          if (data.code !== 200) {
            message.error(data.message)
            return
          }
          state.gdDetail = data.data
          let descriptionData = JSON.parse(data.data.workOrderDto.description)
          let solutionDetail = JSON.parse(data.data.workOrderDto.solutionDetail)
          newState.solution = data.data.workOrderDto.solution
          state.detailDescription = data.data.workOrderDto.descriptio
          state.tableData = data.data.workOrderOperateLogList
          newState.descriptionFileList = data.data.workOrderDto.descriptionAttachmentList
          newState.solveFileList = data.data.workOrderDto.attachmentList
          solutionQuillEditor.value.setContents(solutionDetail)
        })
        .finally(() => {
          pageLoading.loading = false
        })
    }
    const taskPeopleList = ref([])
    function handlerAddPeople(name) {
        if (state.modalForm.solverList.indexOf(name) !== -1) {
            state.modalForm.solverList = state.modalForm.solverList.filter(item => item !== name)
        } else {
            state.modalForm.solverList.push(name)
        }
    }
    function getAllUser() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.allUser = data.data.userDtoList
        })
    }
    function resetFather() {
        state.modalForm = {
            content: undefined,
            type: undefined,
            priority: undefined,
            questionSource: undefined,
            workHours: undefined,
            endTime: undefined,
            areaCode: undefined,
            projectId: undefined,
            milepostId: undefined,
            customer: undefined,
            production: undefined,
            environment: undefined,
            description: undefined,
            solverList: [],
            fileList: []
        }
    }
    function resetGdQuill() {
        quillEditor.value.setContents({})
    }
    //     查看附件
    function showFile(record) {
        resetCurrentData()
        currentData.value = record
        state.fileVisible = true
    }
    //     查看附件
    function showDetailFile() {
        resetCurrentData()
        currentData.value = state.gdDetail?.workOrderDto
        state.fileDetailVisible = true
    }


    function resetCurrentData() {
        currentData.value = {}
    }
    const changeRef = ref(null)
    function resetChangeForm() {
        state.changeStatusForm = {
            status: undefined,
            reason: '',
            attachmentList: [],
            workOrderId: undefined,
            solution: undefined
        }
    }
    //     子工单编辑
    function handleEdit(record) {
        resetCurrentData()
        currentData.value = record
        state.editSonVisible = true
        Object.assign(state.modalForm, record)
        nextTick(() => {
            let descriptionData = JSON.parse(record.description)
            quillEditor.value.setContents(descriptionData)
            state.modalForm.description = descriptionData
        })
    }
    function handleAddRemark() {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        return
      }
        state.addRemarkVisible = true
        state.remarkTitle = '新建备注'
        nextTick(() => {
            remarkQuillRef.value.setContents('')
        })
    }
    const remarkQuillRef = ref(null)
    async function confirmRemark() {
      const deltaContent = remarkQuillRef.value.getContents()
      const htmlContent = remarkQuillRef.value.getHTML() // 获取 HTML 内容
      const imageUploadPromises = []

      deltaContent.ops.forEach(op => {
        if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
          const localSrc = op.insert.image

          // 如果是 base64 图片，上传并替换为 URL
          const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

          const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
            // 替换 op 中的 base64 URL 为服务器返回的 URL
            op.insert.image = fullUrl
          })

          imageUploadPromises.push(uploadPromise)
        }
      })

      try {
        await Promise.all(imageUploadPromises)
        state.remarkLoading = true
        if (currentRemark.value.id) {
          const params = {
            id: currentRemark.value.id,
            content: JSON.stringify(deltaContent),
            'parentId': currentRemark.value.parentId
          }
          put('/solution-ppm/api/v2/built-in-system-ppm/work_order/remark', params)
            .then(data => {
              if (data.code !== 200) {
                message.error(data.message)
                return
              }
              message.success(data.message)
              state.addRemarkVisible = false
              getData()
            })
            .finally(() => {
              state.remarkLoading = false
            })
        } else {
          const params = {
            'workOrderId': state.detailId,
            'content': JSON.stringify(deltaContent)
          }
          post('/solution-ppm/api/v2/built-in-system-ppm/work_order/remark', params)
            .then(data => {
              if (data.code !== 200) {
                message.error(data.message)
                return
              }
              message.success(data.message)
              state.addRemarkVisible = false
              getData()
            })
            .finally(() => {
              state.remarkLoading = false
            })
        }
      } catch (error) {
        console.error('图片上传失败', error)
        return // 终止提交
      }


    }
    // function getHtmlContent(delta) {
    //     const quill = new Quill(document.createElement('div'))
    //     quill.setContents(JSON.parse(delta))
    //     return quill.root.innerHTML
    // }
    function getHtmlContent(input) {
        console.log(input);
        // 防御性处理：避免 null 或 undefined
        if (!input) return ''

        // 尝试解析为富文本 Delta 格式
        let deltaObj = null
        try {
            const parsed = typeof input === 'string' ? JSON.parse(input) : input
            if (parsed?.ops && Array.isArray(parsed.ops)) {
                deltaObj = parsed
            }
        } catch (e) {
            // 解析失败，说明不是 JSON 或不是 Delta 格式，走普通字符串逻辑
        }

        // 如果是富文本格式
        if (deltaObj) {
            try {
                const tempEl = document.createElement('div')
                const quill = new Quill(tempEl)
                quill.setContents(deltaObj)
                return quill.root.innerHTML
            } catch (err) {
                console.error('富文本渲染失败', err)
                return '' // 保险起见返回空
            }
        }

        // 否则是普通文本，做一下换行处理
        return String(input).replace(/\n/g, '<br/>')
    }
    const currentRemark = ref({})
    const backRemarkQuillRef = ref(null)
    function resetBack() {
        currentRemark.value = {}
    }
    function feedBackRemark(record) {
        resetBack()
        currentRemark.value = record
        state.backRemarkVisible = true
        nextTick(() => {
            backRemarkQuillRef.value.setContents('')
        })
    }
    // 确认回复
    async function confirmBackRemark() {
      state.remarkLoading = true
      const deltaContent = backRemarkQuillRef.value.getContents()
      const imageUploadPromises = []

      deltaContent.ops.forEach(op => {
        if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
          const localSrc = op.insert.image

          // 如果是 base64 图片，上传并替换为 URL
          const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

          const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
            // 替换 op 中的 base64 URL 为服务器返回的 URL
            op.insert.image = fullUrl
          })

          imageUploadPromises.push(uploadPromise)
        }
      })

      try {
        await Promise.all(imageUploadPromises)
        const params = {
          workOrderId: state.detailId,
          content: JSON.stringify(backRemarkQuillRef.value.getContents()),
          parentId: currentRemark.value.id
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/work_order/remark/feedback', params)
          .then(data => {
            if (data.code !== 200) {
              message.error(data.message)
              return
            }
            message.success(data.message)
            state.backRemarkVisible = false
            getData()
          })
          .finally(() => {
            state.remarkLoading = false
          })
      } catch (error) {
        console.error('图片上传失败', error)
        return // 终止提交
      }


    }
    //     编辑备注
    function editRemark(record) {
        resetBack()
        currentRemark.value = record
        state.remarkTitle = '编辑备注'
        state.addRemarkVisible = true
        nextTick(() => {
            let descriptionData = JSON.parse(record.content)
            remarkQuillRef.value.setContents(descriptionData)
        })
    }
    function handlerDeleteRemark(record) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/work_order/remark/${record.id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    function handlerDeleteFeedBack(record) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/work_order/remark/feedback/${record.id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    function handleDelete() {
        del(`/solution-ppm/api/v2/built-in-system-ppm/work_order/${currentData.value.id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            state.deleteVisible = false
            getData()
        })
    }
    function toDelete(record) {
        resetCurrentData()
        currentData.value = record
        state.deleteVisible = true
    }
    //   面包屑返回
    function handleReturn(item) {
        router.push(item.url)
    }
    //     预览图片
    function previewAttachment(item) {
        // 检查附件类型
        if (item.type.startsWith('image')) {
            state.previewImage = item.url // 设置预览图片的URL
            state.previewVisible = true // 显示模态框
        } else {
            // state.isImagePreview = false;
            // // 如果是其他类型的文件，直接在模态框中显示
            // state.previewFileUrl = item.url; // 设置预览文件的URL
            message.info('目前仅支持图片预览')
        }
    }
    function handlepreviewCancel() {
        state.previewVisible = false
    }
    //     新需求
    const newState = reactive({
        descriptionFileList: [],
        solveFileList: [],
        //   解决方案概述
        solution: '',
        changeStatusLoading: false,
        isExpandAll: false,

        workOrderId: undefined,
        saveLoading: false
    })
    const circulationFormRef = ref(null)
    const resolvingFormRef = ref(null)
    const resolvedFormRef = ref(null)
    const resolvingQuillRef = ref(null)
    const resolvedQuillRef = ref(null)
    const solutionQuillEditor = ref(null)
    function handlerDescriptionUpload(file) {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        getData()
        return false
      }
      const data = new FormData()
      data.append('file', file)

      post('/file-storage/api/v1/file/upload', data)
        .then(({ data: { fullUrl } }) => {
          if (data) {
            // 新文件对象
            const newFile = {
              uid: file.uid,
              lastModified: file.lastModified,
              name: file.name,
              size: file.size,
              type: file.type,
              status: 'done',
              url: fullUrl
            }

            // 去重，保留一个副本
            newState.descriptionFileList = [
              // 保留已存在文件（去除重复）
              ...newState.descriptionFileList.filter(
                item => item.uid !== file.uid && item.name !== file.name
              ),
              // 添加新的文件
              newFile
            ]
            saveDetail()
          }
        })
        .catch(e => {
          message.error('上传失败' + e)
        })

      return false
    }
    function handlerDescriptionRemove(file) {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        getData()
        return false
      }
      newState.descriptionFileList = newState.descriptionFileList.filter(item => item.uid !== file.uid)
      saveDetail()
    }
    // 解决证明附件
    function handlerSolveUpload(file) {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        getData()
        return false
      }
      const data = new FormData()
      data.append('file', file)

      post('/file-storage/api/v1/file/upload', data)
        .then(({ data: { fullUrl } }) => {
          if (data) {
            // 新文件对象
            const newFile = {
              uid: file.uid,
              lastModified: file.lastModified,
              name: file.name,
              size: file.size,
              type: file.type,
              status: 'done',
              url: fullUrl
            }

            // 去重，保留一个副本
            newState.solveFileList = [
              // 保留已存在文件（去除重复）
              ...newState.solveFileList.filter(
                item => item.uid !== file.uid && item.name !== file.name
              ),
              // 添加新的文件
              newFile
            ]
            saveDetail()
          }
        })
        .catch(e => {
          message.error('上传失败' + e)
        })

      return false
    }
    function handlerSolveRemove(file) {
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        getData()
        return false
      }
      newState.solveFileList = newState.solveFileList.filter(item => item.uid !== file.uid)
      saveDetail()
    }
    // 修改解决方案详述。
    async function saveDetail(){
      if(state.gdDetail.workOrderDto.status==='已关闭'||state.gdDetail.workOrderDto.status==='已回访'){
        message.info('请将父工单状态变更为解决中后重试')
        getData()
        return
      }
      newState.saveLoading = true
      const params = {
        solution:newState.solution,
        solutionDetail:'',
        attachment:JSON.stringify(newState.solveFileList),
        descriptionAttachment:JSON.stringify(newState.descriptionFileList),
        id:state.detailId
      }
      const deltaContent = solutionQuillEditor.value.getContents()
      const imageUploadPromises = []

      deltaContent.ops.forEach(op => {
        if (op.insert && op.insert.image && op.insert.image.startsWith('data:')) {
          const localSrc = op.insert.image

          // 如果是 base64 图片，上传并替换为 URL
          const file = dataURLtoFile(localSrc, 'image.png') // 将 base64 转换为 File 对象

          const uploadPromise = uploadFileAPI(file).then(({ data: { fullUrl } }) => {
            // 替换 op 中的 base64 URL 为服务器返回的 URL
            op.insert.image = fullUrl
          })

          imageUploadPromises.push(uploadPromise)
        }
      })
      try {
        await Promise.all(imageUploadPromises)
      } catch (error) {
        console.error('图片上传失败', error)
        return // 终止提交
      }
      params.solutionDetail = JSON.stringify(deltaContent)
      let data = JSON.stringify(params)
      put('/solution-ppm/api/v2/built-in-system-ppm/work_order/detail_modify',params).then(data=>{
        if (data.code !== 200) {
          message.error(data.message)
          return
        }
        message.success(data.message)
        getData()
      }).catch(()=>{
        newState.saveLoading = false
      }).finally(()=>{
        newState.saveLoading = false
      })
    }
    function isEditDisabled(item) {
        return ['无需解决', '已关闭', '已解决'].includes(item.status)
    }
    //     新需求
    import ButtonItem from './Page3000001042.vue'
    const colorMap = {
        '未开始': { color: '#A9A9A9',    background: '#F6F6F6 !important' },
        '已解决': { color: '#52C41A' , background: '#EDF9E8 !important'},
        '解决中': { color: '#3875FF',  background: '#EBF1FF  !important' },
        '无需解决': { color: '#FFC900' ,background: '#FFF8E0  !important'},
        '已关闭': { color: '#262626',background: '#EBEBEB !important' },
        '已回访': { color: '#9254DE',background: '#EFE6FB !important' },
        '待分发': { color: '#FF7D27', background: '#FFEADC !important' }
    }
    function getColorStyle(status) {
        return colorMap[status] || '#262626'
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }

    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }

    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }

    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }

    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }

    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }

    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }

    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    .vid_4wk3vtmqnu :deep(a) {
        color: undefined;
    }

    :deep(.vid_4wk3vtmqnu.@{ant-prefix}-breadcrumb) > span:last-child a {
        color: undefined;
        opacity: 0.75;
    }

    .vid_4wk3vtmqnu {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: undefined;
        margin-bottom: 24px;
        padding-left: 24px;
        background-color: #ffffff;
    }

    /*样式*/
    .body {
        height: 100%;
    }
    .top-information {
        background-color: #fff;
        padding: 21px 24px;
        border-radius: 4px;
    }
    .information-top {
        display: flex;
        justify-content: space-between;
      margin-bottom: 8px;
    }
    .title {
        display: flex;
        height: 22px;
        font-size: 16px;
        line-height: 22px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        align-items: center;
        gap: 8px;
    }
    .title-icon {
        height: 16px;
        width: 4px;
        background-color: #3875ff;
    }
    .information-table {
        margin-top: 23px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
    }
    .table-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
        width: 122px;
        text-align: right;
        line-height: 24px;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
        flex-shrink: 0; /* 不允许压缩 */
        background: #fafafa;
    }
    .table-content {
        padding: 10px 17px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .table-content-one,
    .table-content-four {
        padding: 10px 17px;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
        line-height: 20px;
    }
    .one-line,
    .four-line {
        height: 40px;
        display: flex;
        line-height: 40px;
    }
    .four-line {
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
    }
    .table-content-four {
        flex: 1;
        text-overflow: ellipsis; /* 如果内容过长显示省略号 */
        overflow: hidden;
        white-space: nowrap;
    }
    .middle {
        border-left: 1px solid #d9d9d9;
    }
    .middle-div {
        border-bottom: none;
    }
    .problem-description {
        width: 100%;
        padding: 16px 24px;
        background-color: #fff;
        margin-top: 16px;
        border-radius: 4px;
    }
    .child-inner {
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 32px;
    }
    .item-children .inner-main {
        position: relative;
    }
    .item-children .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -16px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .son-gd {
        margin-top: 16px;
        background-color: #fff;
        padding: 21px 24px;
        border-radius: 4px;
    }
    /*样式*/
    .inner-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 100%;
        flex: 1;
    }
    .inner-title {
        text-align: right;
    }
    .inner-main {
        display: flex;
        flex: 1;
    }
    .item-children {
        background: #f0f2f5;
        border-radius: 4px 4px 0 0;
        margin-bottom: 16px;
        margin-top: 16px;
        border: 2px solid #f0f2f5;
        border-radius: 4px;
    }
    .item-children .collapse-title-right {
        padding-right: 16px;
    }
    .item-children .collapse-title {
        padding-right: 16px;
        border-bottom: 1px solid #d9d9d9;
    }
    .child-inner {
        padding: 16px;
        display: flex;
        align-items: center;
        background-color: #fff;
        gap: 32px;
    }
    .item-children .inner-main {
        position: relative;
    }
    .item-children .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -16px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .collapse-title {
        width: 100%;
        display: flex;
        height: 48px;
        justify-content: space-between;
        background: #ebf1ff;
        border-radius: 4px 4px 0 0;
    }
    .collapse-title-left {
        display: flex;
        width: 25%;
        gap: 8px;
        align-items: center;
        padding: 0 16px;
    }
    .collapse-title-right {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-right: 63px;
    }
    .gd-title {
        font-size: 18px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .collapse-title-font,
    .inner-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .collapse-content-font,
    .inner-content {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .border-div {
        position: relative;
    }
    .border-line {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #a5a6a7;
        right: -8px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .collapse-title-right-btn {
        display: flex;
        gap: 16px;
    }
    .btn-item {
        color: #3875ff;
        position: relative;
        cursor: pointer;
    }
    .border-btn {
        position: absolute;
        width: 1px;
        height: 14px;
        background-color: #3875ff;
        right: -8px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .active-btn {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .item-inner {
        background-color: #f8f9fa;
        display: flex;
        padding: 16px;
    }
    .item-children:last-child {
        margin-bottom: 0;
    }
    .body-bottom {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin-top: 16px;
        border-radius: 4px;
    }
    .remark-div {
        width: 100%;
        background-color: #fff;
        padding: 21px 24px;
        border-radius: 4px;
    }
    .change-record {
        background-color: #fff;
        padding: 21px 24px;
        border-radius: 4px;
    }
    .remark-div .collapse-title {
      background: rgba(56,117,255,0.10);
      border-radius: 4px 4px 0 0;
    }
    .remark-div .collapse-title-left {
        width: 50%;
        display: flex;
        line-height: 48px;
    }
    .remark-div .collapse-title-right {
        flex: 1;
        justify-content: end;
        padding-right: 16px;
    }

    .remark-text {
        border: 1px solid #d9d9d9;
        background-color: #fff;
        padding: 16px;
        margin-top: 5px;
        margin-bottom: 16px;
    }
    .remark-title {
        display: flex;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .remark-weight {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .remark-content .collapse-title {
        background-color: #fff;
        border-bottom: 1px solid #d9d9d9;
        margin: 0;
    }
    .remark-inner {
        padding: 16px;
        background-color: #fff;
    }
    .remark-child {
        background: #ffffff;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .default-table {
        margin-top: 16px;
    }
    .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 8px 16px;
        border-right: 1px solid #d9d9d9;
    }
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #595959;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;

        .cell-wrapper {
            padding: 0 16px;
        }
    }
    .form-content :deep(.ant3-form-item-label) {
        width: 115px;
    }
    :deep(.ql-blank) {
        min-height: 110px;
        background: #ffffff;
    }
    :deep(.ql-editor) {
        min-height: 110px;
        background: #ffffff;
    }
    .form-content :deep(.ant3-input-number),
    :deep(.ant3-picker) {
        width: 100%;
    }

    .remark-modal :deep(.ql-blank) {
        min-height: 110px;
        background: #ffffff;
    }
    .change-status :deep(.ant3-form-item-label) {
        width: 110px;
    }
    .solution-div {
        display: flex;
        gap: 16px;
        width: 100%;
    }
    .page_root {
        overflow: auto !important;
    }
    :deep(.ant3-breadcrumb) span:nth-child(2) .ant3-breadcrumb-link a {
        color: #262626 !important; /* 设置字体颜色为红色 */
        font-weight: 800;
    }
    .top-title {
        height: 16px;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        font-size: 16px;
        line-height: 16px;
        color: #262626;
        font-weight: 600;
    }
    .file-content {
        padding: 16px;
        color: #3875ff;
        cursor: pointer;
    }
    /*样式*/
    .body {
      height: 100%;
    }
    .top-information {
      background-color: #fff;
      padding: 21px 24px;
      border-radius: 4px;
    }
    .information-top {
      display: flex;
      justify-content: space-between;
    }
    .title {
      display: flex;
      height: 22px;
      font-size: 16px;
      line-height: 22px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 600;
      align-items: center;
      gap: 8px;
    }
    .title-icon {
      height: 16px;
      width: 4px;
      background-color: #3875ff;
    }
    .information-table {
      margin-top: 23px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }
    .table-title {
      font-size: 14px;
      color: #595959;
      letter-spacing: 0;
      text-align: right;
      font-weight: 400;
      width: 122px;
      text-align: right;
      line-height: 24px;
      padding: 8px 16px;
      border-right: 1px solid #d9d9d9;
      flex-shrink: 0; /* 不允许压缩 */
      background: #fafafa;
    }
    .table-content {
      padding: 10px 17px;
      font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 500;
    }
    .table-content-one,
    .table-content-four {
      padding: 10px 17px;
      font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 500;
      line-height: 20px;
    }
    .one-line,
    .four-line {
      height: 40px;
      display: flex;
      line-height: 40px;
    }
    .four-line {
      border-top: 1px solid #d9d9d9;
      border-bottom: 1px solid #d9d9d9;
    }
    .table-content-four {
      flex: 1;
      text-overflow: ellipsis; /* 如果内容过长显示省略号 */
      overflow: hidden;
      white-space: nowrap;
    }
    .middle {
      border-left: 1px solid #d9d9d9;
    }
    .middle-div {
      border-bottom: none;
    }
    .problem-description {
      width: 100%;
      padding: 16px 24px;
      background-color: #fff;
      margin-top: 16px;
      border-radius: 4px;
    }
    .description-content {
      background: #fdfdfd;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      margin-top: 16px;
      padding: 16px;
    }
    .child-inner {
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .item-children .inner-main {
      position: relative;
    }
    .item-children .border-line {
      position: absolute;
      width: 1px;
      height: 14px;
      background-color: #a5a6a7;
      right: -16px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .son-gd {
      margin-top: 16px;
      background-color: #fff;
      padding: 21px 24px;
      border-radius: 4px;
    }
    /*样式*/
    .inner-content {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 100%;
      flex: 1;
    }
    .inner-title {
      text-align: right;
    }
    .inner-main {
      display: flex;
      flex: 1;
    }
    .item-children {
      background: #f0f2f5;
      border-radius: 4px 4px 0 0;
      margin-bottom: 16px;
      margin-top: 16px;
      border: 2px solid #f0f2f5;
      border-radius: 4px;
    }
    .item-children .collapse-title-right {
      padding-right: 16px;
    }
    .item-children .collapse-title {
      padding-right: 16px;
      border-bottom: 1px solid #d9d9d9;
    }
    .child-inner {
      padding: 16px;
      display: flex;
      align-items: center;
      background-color: #fff;
      gap: 32px;
    }
    .item-children .inner-main {
      position: relative;
    }
    .item-children .border-line {
      position: absolute;
      width: 1px;
      height: 14px;
      background-color: #a5a6a7;
      right: -16px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .collapse-title {
      width: 100%;
      display: flex;
      height: 48px;
      justify-content: space-between;
      background: #ebf1ff;
      border-radius: 4px 4px 0 0;
    }
    .collapse-title-left {
      display: flex;
      width: 25%;
      gap: 8px;
      align-items: center;
      padding: 0 16px;
    }
    .collapse-title-right {
      display: flex;
      align-items: center;
      gap: 16px;
      padding-right: 63px;
    }
    .gd-title {
      font-size: 18px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 500;
    }
    .collapse-title-font,
    .inner-title {
      font-size: 14px;
      color: #595959;
      letter-spacing: 0;
      text-align: right;
      font-weight: 400;
    }
    .collapse-content-font,
    .inner-content {
      font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 500;
    }
    .border-div {
      position: relative;
    }
    .border-line {
      position: absolute;
      width: 1px;
      height: 14px;
      background-color: #a5a6a7;
      right: -8px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .collapse-title-right-btn {
      display: flex;
      gap: 16px;
    }
    .btn-item {
      position: relative;
      cursor: pointer;
    }
    .border-btn {
      position: absolute;
      width: 1px;
      height: 14px;
      background-color: #3875ff;
      right: -8px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .active-btn {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .item-inner {
      background-color: #f8f9fa;
      display: flex;
      padding: 16px;
    }
    .item-children:last-child {
      margin-bottom: 0;
    }
    .body-bottom {
      margin-top: 16px;
      border-radius: 4px;
    }
    .remark-div {
      background-color: #fff;
      padding: 21px 24px;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .change-record {
      background-color: #fff;
      padding: 21px 24px;
      border-radius: 4px;
    }
    .remark-main {
      background: #FFFFFF;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.20);
      border-radius: 4px;
      margin-top: 16px;
      overflow: auto;
    }
    .remark-content {
      padding: 8px 16px;
    }
    .remark-text {
      border: 1px solid #d9d9d9;
      background-color: #fff;
      padding: 16px;
      margin-top: 5px;
      margin-bottom: 16px;
    }
    .remark-title {
      display: flex;
      font-size: 14px;
      color: #595959;
      letter-spacing: 0;
      text-align: right;
      font-weight: 400;
    }
    .remark-weight {
      font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 500;
    }
    .remark-content .collapse-title {
      background-color: #fff;
      border-bottom: 1px solid #d9d9d9;
      margin: 0;
    }
    .remark-inner {
      padding: 16px;
      background-color: #fff;
    }
    .remark-child {
      background: #ffffff;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .default-table {
      margin-top: 16px;
    }
    .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
      background-color: #3875ff;
      color: #fff;
      font-weight: 600;
      padding: 8px 16px;
      border-right: 1px solid #d9d9d9;
    }
    .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
      font-size: 14px;
      font-family: arial, helvetica, 'microsoft yahei';
      font-weight: 400;
      color: #595959;
      border-bottom: 1px solid #d9d9d9;
      padding: 8px 16px;
      word-break: break-all;

      .cell-wrapper {
        padding: 0 16px;
      }
    }
    .form-content :deep(.ant3-form-item-label) {
      width: 135px;
    }
    :deep(.ql-blank) {
      min-height: 110px;
      background: #ffffff;
    }
    :deep(.ql-editor) {
      min-height: 110px;
      background: #ffffff;
    }
    .form-content :deep(.ant3-input-number),
    :deep(.ant3-picker) {
      width: 100%;
    }
    .remark-modal :deep(.ql-blank) {
      min-height: 110px;
      background: #ffffff;
    }
    .change-status :deep(.ant3-form-item-label) {
      width: 110px;
    }
    .page_root {
      overflow: auto !important;
    }
    .border-div .border-line {
      right: -8px;
    }
    .remark-main .border-btn {
      right: -8px;
    }
    .remark-main .btn-item {
      color: #3875ff;
    }
    :deep(.ant3-breadcrumb) > span:nth-of-type(2) .ant3-breadcrumb-link {
      color: #262626; /* 设置字体颜色为红色 */
      font-weight: 800;
    }
    .top-title {
      height: 16px;
      padding-left: 8px;
      border-left: 4px solid #3875ff;
      font-size: 16px;
      line-height: 16px;
      color: #262626;
      font-weight: 600;
    }
    .file-content {
      padding: 16px;
      color: #3875ff;
      cursor: pointer;
    }
    .form-content :deep(.ql-snow .ql-editor) img {
      width: 100px;
    }
    .description-fileList {
      margin-top: 16px;
    }
    .file-drag {
      padding: 12px 0;
    }
    .ant-upload-drag-icon {
      width: 88px;
      height: 28px;
      border: 1px solid #3875ff;
      line-height: 28px;
      text-align: center;
      left: 50%;
      transform: translate(-50%);
      border-radius: 20px;
      color: #3875ff;
      margin: 16px 0 12px 80px;
    }
    .file-top{
      text-align: center;font-size: 14px;
      color: #262626;
      letter-spacing: 0;
      font-weight: 500;
    }
    .file-bottom{
      font-size: 12px;
      color: #595959;
      letter-spacing: 0;
      font-weight: 400;text-align: center
    }
    .page_root{
      overflow: hidden!important;
    }
    .body{
      overflow-y: auto;
      height: calc(100vh - 150px);
    }
    .max-length{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .ant-upload-drag-icon:hover{
      background-color: #3875ff;
      color: #fff;
    }
    .abbreviation :deep(.ql-snow .ql-editor) img {
      width: 200px;
    }
    .content-line{
      position: absolute;
      right: 0;
      height: 48px;
      width: 1px;
      background-image: linear-gradient(180deg, rgba(56,117,255,0.00) 0%, #3875FF 50%, rgba(56,117,255,0.00) 100%);
    }
    .item-content1 {
      flex: 0 0 15%; /* 最小宽度 */
    }

    .item-content2 {
      flex: 0 0 10%; /* 最大宽度 */
    }
    .item-content3{
      flex: 0 0 15%; /* 最大宽度 */
    }
    .item-content4 {
      max-width: 30%;
    }
    .item-content5 {
      max-width: 15%;
    }

    .operation-log{
      margin-top: 16px;
      border-left: 1px dashed #D9D9D9;
      padding-left: 24px;
      position: relative;
      margin-bottom: 32px;
    }
    .operation-log:last-child{
      border-left: none;
    }

    .opration-title{
      height: 50%;
    }
    .opration-msg{
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .circle-line{
      height: 12px;
      border-left: 1px dashed #D9D9D9;
      position: absolute;
      top: -17px;
      left: 50%;
      transform: translate(-50%);
    }
    .inner-circle {
      width: 8px; /* 设置中间空白的宽度 */
      height: 8px; /* 设置中间空白的高度 */
      background-color: white; /* 设置中间空白的背景色为白色 */
      border-radius: 50%; /* 将元素设置为圆形 */
      position: absolute; /* 绝对定位，使其位于圆环中间 */
      top: 50%; /* 垂直居中 */
      left: 50%; /* 水平居中 */
      transform: translate(-50%, -50%); /* 将元素水平垂直居中 */

    }
    .opration-content{
      background-image: linear-gradient(92deg, rgba(56,117,255,0.20) 0%, rgba(56,117,255,0.07) 98%);
      border-radius: 4px;
      height: 80px;
      display: flex;
      margin-bottom: 16px;
    }
    .opration-title-icon{
      height: 16px;
      width: 16px;
    }
    .item-content {
      flex: 1;
      padding: 16px 24px;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .title-content{
      position: relative;
      top: -10px;
      font-size: 16px;
      color: #3875ff;
    }
    .circle {
      position: absolute;
      left: -2px;
      top: -5px;
      width: 16px; /* 设置圆环的宽度 */
      height: 16px; /* 设置圆环的高度 */
      border: 3px solid #3875ff; /* 设置圆环的边框，宽度为8px，颜色为#3875ff */
      border-radius: 50%; /* 将元素设置为圆形 */
    }

    .inner-circle {
      width: 8px; /* 设置中间空白的宽度 */
      height: 8px; /* 设置中间空白的高度 */
      background-color: white; /* 设置中间空白的背景色为白色 */
      border-radius: 50%; /* 将元素设置为圆形 */
      position: absolute; /* 绝对定位，使其位于圆环中间 */
      top: 50%; /* 垂直居中 */
      left: 50%; /* 水平居中 */
      transform: translate(-50%, -50%); /* 将元素水平垂直居中 */

    }
    .circle-line{
      height: 12px;
      border-left: 1px dashed #D9D9D9;
      position: absolute;
      top: -17px;
      left: 50%;
      transform: translate(-50%);
    }
    .gd-status{
        padding: 5px 10px;
        border-radius: 5px;
        border-radius: 0 4px 0 4px;
        text-align: center;
    }
</style>
